﻿<script src="../../../Desktop/server/server.js"></script>
<template>
   <div class="top">

         
 
 <div class="head">
     <mt-button @click.native="popupVisible3 = true" style="width: 15%;background-color: #ffffff;margin-left: -80%;margin-top:8%;">
     <img style="width:110%;" src="../assets/top/03.png">
     </mt-button>
     <div @click="gotoSearch()" style="width:70%; height:40px;margin-top:-10%;margin-left:20%;background-color: #dcdcdc;">
      <img style="width:30%;margin-top:3%;" src="../assets/top/01.png">  
 </div>
 
 <div class="fenge"></div>

   <mt-popup v-model="popupVisible3" position="right" class="mint-popup-3" :modal="false">
      <mt-button @click.native="popupVisible3 = false" size="large" type="primary">
        <img  style="width:110%;" src="../assets/top/03.png">
      </mt-button>
        <img src="../assets/top/shijian.jpg" style="width:20%;height:70px;margin-top:5%;border-radius:50%;">  
             <div>
                
                 <span style="border: 2px #cccc99 solid;width:5%;"></span>
                 <span style="margin-left:5%;"> {{username}}</span>
                 <span style="border:2px #cccc99 solid;width:5%;margin-left:5%;"></span>
             </div>

             <div style="background-color: #ffffff;width: 90%;height: 30px;margin-left:auto;margin-right: auto;margin-top:4%;">
                 <span style="margin-left:-35%;">简介：</span>
                 
             </div>

             <div style="background-color: #ffffff;width: 90%;height: 30px;margin-left:auto;margin-right: auto;margin-top:4%;">
                 <span>我的回答：0</span>
                 <span style="margin-left: 10%;">我关注的:0</span>
                 <span style="margin-left: 10%;">关注我的：0</span>
             </div>
    </mt-popup>

 <div style="width:100%;height:auto;background-color: white;">
     <span><img @click="togoN4()"  style="width:32%;" src="../assets/top/02.png"></span>
     <span><img @click="togoAnswer()" style="width:32%;" src="../assets/top/04.png"></span>
     <span><img @click="togoShare()" style="width:32%;"src="../assets/top/05.png"></span>
 </div>

    <div style="float: left;margin-top:-60%;">
    <div class="tuijian" style="margin-top:60%;">话题推荐：</div>
    <div style="width:100%; height:120px;">
        <span class="IMG"><img @click="togoN()" src="../assets/top/06.png"></span>
        <span class="IMG"><img @click="togoN1()" src="../assets/top/07.png"></span>
        <span class="IMG"><img @click="togoN2()" src="../assets/top/08.png"></span>
        <span class="IMG"><img @click="togoN3()" src="../assets/top/09.png"></span>

    </div>
    </div>

    <div class="imgDiv" style="margin-top:-10%;">      
                    <img src="../assets/touxiang.jpg" class="cricle1" style="width:8%;height:30px;margin-top:5%;border-radius:50%;">
               
                    <div class="hua" style="margin-top:7%;font-size:14px;font-weight:bold;"  >{{fx_title}}</div>        
                    <div class="neirong" style="margin-top:5%;text-align:left">{{fx_neirong}}</div> 
                    <div class="hua" style="margin-top:5%;float:right;color:gray;" >{{fx_value}}</div>
                    <div class="fenge" style="margin-top:50%;opacity:0.5;"></div>  
                                                   
    </div>
    <div class="imgDiv" style="margin-top:-10%;">      
                    <img src="../assets/touxiang.jpg" class="cricle1" style="width:8%;height:30px;margin-top:5%;border-radius:50%;">
               
                    <div class="hua" style="margin-top:7%;font-size:14px;font-weight:bold;"  >{{book_bt}}</div>        
                    <div class="neirong" style="margin-top:5%;text-align:left">{{book_answer}}</div> 
                    <div class="hua" style="margin-top:5%;float:right;color:gray;" >{{book_name}}</div>
                    <div class="fenge" style="margin-top:50%;opacity:0.5;"></div>  
                                                   
     </div>
  <div v-for="(item,index) in book_nam" class="imgDiv" style="margin-top:-10%;" @click="togo(index)">      
                    <img src="../assets/touxiang.jpg" class="cricle1" style="width:8%;height:30px;margin-top:5%;border-radius:50%;">
               
                    <div class="hua" style="margin-top:7%;font-size:14px;font-weight:bold;"  >{{book_b[index]}}</div>        
                    <div class="neirong" style="margin-top:5%;text-align:left">{{book_answe[index]}}</div> 
                    <div class="hua" style="margin-top:5%;float:right;color:gray;" >{{book_nam[index]}}</div>
                    <div class="fenge" style="margin-top:50%;opacity:0.5;"></div>  
                    <div></div>                                 
         </div>


      
   </div>
</template>

<script>
    export default{
        data(){
            return{
                username:'',
                book_answe:'',
                book_b:'',
                book_nam:'',
                book_answer:'',
                book_bt:'',
                book_name:'',
                fx_title:'',
                fx_neirong:'',
                fx_value:'',
                popupVisible3: false,
               
                book_b:[
                    "大一高数如何学习？",
                    "div中如何设置文字居中？",
                    "在ae中如何做视频变速？",
                    "英语专业四级和CET四级有什么区别？",
                 
                ],
                 book_answe:[
                    "中学的教学方式和方法与大学有质的差别，中学的学习学生是在教师的直接指导下进行模仿和单一性的学习，大学则是在...",

                    "可以用line-height行高来设置文字的垂直居中，水平居中就用<center>这个标签或者margin:0 auto;这个样式或者楼上讲...",

                    "1、打开 Adobe After Effects CC软件。2、点击新建合成按钮，新建一合成。3、ctrl+i导入准备好的视频或者音乐素...",

                    "TEM-4英语专业四级考试（TEM-4，Test for English Majors-Band 4），全称为全国高校英语专业四级考试。自1991年...",

                ],
                book_nam:[
                    "来自话题：数学",
                    "来自话题：网页设计",
                    "来自话题：视频剪辑",
                    "来自话题：英语",
                 
                ],
                  book_engName:[
                    "booo_1","booo_2","booo_3","booo_4","booo_5",
                ],
              
            }
        },

           mounted(){
            this.getUser();
            this.getQuestion();

        },

       
        methods:{
           getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id为书名的id，在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            }, 
            togoN:function(){
                this.$router.push({path:"detail"})
            },
            togoN1:function(){
                this.$router.push({path:"daying"})
            },
            togoN2:function(){
                this.$router.push({path:"shipin"})
            },
            togoN3:function(){
                this.$router.push({path:"wangye"})
            },
            togoN4:function(){
                this.$router.push({path:"tiwen"})
            },
            togoAnswer:function(){
                this.$router.push({path:"answer"})
            },
            togoShare:function(){
                this.$router.push({path:"share"})
            },
             gotoSearch:function(){
                this.$router.push({path:"search"})
            },

                  getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        _this.book_bt = '';
                        _this.book_name = '';
                        _this.book_answer = '';
                        _this.fx_title = '';
                        _this.fx_neirong = '';
                        _this.fx_value = '';
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid;   
                        _this.book_bt = res.data.book_bt;
                        _this.book_name = res.data.book_name;
                        _this.book_answer = res.data.book_answer;
                        _this.fx_title = res.data.fx_title;
                        _this.fx_neirong = res.data.fx_neirong;
                        _this.fx_value = res.data.fx_value;               
                        console.log(_this.username);
                       

                    }
                    
                })                 
               
            },
            getQuestion(){
                                                        
                },
            logout(){
                var _this = this;
                _this.$http.post('/users/logout').then(function (res) {
                    if (res.data.result == 0) {
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        _this.username = '';
                        _this.$router.push('/login/login');
                    }
                })
            },

         
          
        }
    }
</script>

<style>

.top{
    margin-top:-1%;
    background-color: white;
}
 .head{
     width:100%;
     height:80px;
     background-color: white;
     
 }

 .fenge{
     width:100%;
     height:8px;
     background-color: #ccc;
     margin-top:2%;
 }

  .fenge1{
     width:100%;
     height:1px;
     background-color: #339933;
     margin-top:1%;
 }

 .cricle{
        background-color: #339933;
        width:6%;
        height:25px;
        float: left;
        margin-left: 6%;
        margin-top: 4%;
        border: 2px #339933 solid;
        border-radius:50%;
    
 }
 .cricle1{
        background-color: #339933;
        width:10px;
        height:10px;
        float: left;
        margin-left: 6%;
        margin-top: 4%;
        border: 2px #339933 solid;
        border-radius:10%;
    
 }

 .hua{
     margin-top:-5%;
     float:left;
     margin-left: 3%;
     color:#000;
    
      background-color: white;
 }

 .neirong {
     width:90%;
     float:left;
     margin-top:6%;
     margin-left:5%;
     color:#000;
     
     background-color: white;
 }

 .tuijian {
     color:#339933;
  
     font-size:120%;
     margin-left:-70%;
 }

 .IMG img{
     width:20%;
     border:5px #339933 solid;
     margin-top:2%;
     margin-left:3%;
     
 }

   .mint-popup-3 {
        width: 100%;
        height: 30%;
        background-color: #fff;
        margin-top:-40%;
        
      }

      .mint-popup-3 .mint-button {
        position: absolute;
        width: 15%;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        margin-top:-36%;
        margin-left:-3%;
        background-color:#ffffff;
      
     
      }


</style>